<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <link rel="StyleSheet" type="text/css" href="/tpa/admin.css" />
      <link rel="StyleSheet" type="text/css" href="/tpa/jquery-ui.css" />
      <link rel="StyleSheet" type="text/css" href="/tpa/jqgrid.css" />
      <style type="text/css">
         input {
            /* width: 30px; */
            width: auto;
         }
         table td {
            vertical-align: middle;
         }
      </style>

      <script type="text/javascript" src="/lib/js/jquery.js"></script>
      <script type="text/javascript" src="/lib/js/jquery.tmpl.js"></script>
      <script type="text/javascript" src="/lib/js/jquery.ui.js"></script>
      <script type="text/javascript" src="/lib/js/localization/grid.locale-{%$lang.alias%}.js"></script>
      <script type="text/javascript" src="/lib/js/jquery.jqGrid.js"></script>
   </head>
   <body>
      <div align="center" style="width: 98%; height: 97%;">
         <table id="grid"></table>
         <div id="grid_nav"></div>
         {%if $authorizedUser->id eq 1%}
         <div style="margin: 30px 0 0; padding: 10px; border: 1px solid #CCC;">
            <form method="post" action="/admin/develope/translation?a=">
               <input type="file" name="import-csv" value="" style="width: 250px;" />
               <input type="submit" value=" Import " />
               <input type="button" value=" Export " onclick="window.location.href='/admin/develope/translation?a=5'" />
            </form>
         </div>
         {%/if%}
      </div>
      <script type="text/javascript">
         var lastsel;
         var $dialog;
         $(document).ready(function(){
            $("#grid").jqGrid({
               url:'/admin/develope/translation?a=1',
               editurl: '/admin/develope/translation?a=2',
               cellurl:'/admin/develope/translation?a=2',
               datatype: "json",
               colNames:[
                  'ID',
                  '{%$TR->meccano->array|escape:"javascript"%}',
                  '{%$TR->meccano->key|escape:"javascript"%}',
                  '{%$TR->meccano->value|escape:"javascript"%}'
                  {%if $authorizedUser->id eq 1%},"{%$TR->meccano->systemvar%}"{%/if%}
               ],
               colModel:[
                  {name:'id',index:'id',hidden:true, sortable:false},
                  {name:'name',index:'name', width:80},
                  {name:'key',index:'key', width:80},
                  {name:'translation',index:'translation', sortable:false}
                  {%if $authorizedUser->id eq 1%},{name:'system',index:'system',sortable:false,editable:true,edittype:"checkbox",editoptions: {value:"1:0"},formatter:'checkbox',align:'center',width:40,search:false}{%/if%}
               ],
               cellEdit: true,
               rowNum:{%$CONFIG->items%},
               rowList:[{%$CONFIG->items%}, {%$CONFIG->items*2%},{%$CONFIG->items*4%}],
               pager: '#grid_nav',
               viewrecords: true,
               caption:"{%$c->title|escape:'javascript'%}",
               autowidth : true,
               height: "100%"
            }).jqGrid('navGrid','#grid_nav',
            {add:false,edit:false{%if $authorizedUser->id neq 1%},del:false{%/if%}},
            null,
            null,
            null,
            {top:50,left:100,sopt:['cn','eq'],multipleSearch:false}
         ).jqGrid('navSeparatorAdd', '#grid_nav'
         ).jqGrid('navButtonAdd','#grid_nav',
            {
               buttonicon:'ui-icon-pencil',
               caption: "",
               title: "{%$TR->meccano->edit|escape:'javascript'%}",
               onClickButton : function (){
                  var id = $('#grid').jqGrid('getGridParam','selrow');
                  if(id == null)
                  {
                     $dialog = $('<div></div>')
                     .html('You didn\'t selet any row')
                     .dialog({title: '{%$TR->error->title|escape:"javascript"%}',modal: true, buttons:{
                           Ok: function() {
                              $(this).dialog("destroy");
                           }
                        }});
                  } else
                  {
                     $.ajax({
                        url:'/admin/develope/translation?a=3&id='+id,
                        dataType: 'json',
                        success: function(data)
                        {
                           $dialog = $('<div id="langVar"></div>')
                           .html($("#tmplForm").tmpl(data))
                           .dialog({title: '{%$TR->meccano->editposition|escape:"javascript"%}', modal: true, width: 440, buttons: {
                                 Ok: function(){
                                    $.ajax({
                                       type: 'POST',
                                       url: '/admin{%$c->href%}?a=4',
                                       data: $('#langVar form').serialize(),
                                       success: processEditForm,
                                       error: function(){processEditForm(false);},
                                       dataType: 'json'
                                    });
                                 },
                                 Cancel: function() {
                                    $(this).dialog("destroy");
                                 }
                              }});
                        }
                     });
                  }
               }
            }
         ){%if $authorizedUser->id neq 1%};{%else%}.jqGrid('navButtonAdd','#grid_nav',
            {
               buttonicon: 'ui-icon-plus',
               caption: "",
               title: "{%$TR->meccano->add|escape:'javascript'%}",
               onClickButton : function (){
                  $dialog = $('<div id="langVar"></div>')
                  .html($("#tmplForm").tmpl({id:"",name:"",key:"",value:[{%foreach from=$langs item='l' name='i'%}{lang_id:{%$l.id%},lang_alias:"{%$l.title|escape:'javascript'%}",value:""}{%if !$smarty.foreach.i.last%},{%/if%}{%/foreach%}]}))
                  .dialog({title: '{%$TR->meccano->addposition|escape:"javascript"%}', modal: true, width: 440, buttons: {
                        Ok: function(){
                           $.ajax({
                              type: 'POST',
                              url: '/admin{%$c->href%}?a=4',
                              data: $('#langVar form').serialize(),
                              success: processEditForm,
                              error: function(){processEditForm(false);},
                              dataType: 'json'
                           });
                        },
                        Cancel: function() {
                           $(this).dialog("destroy");
                        }
                     }});
               }
            }
         );{%/if%}
         });

         function processEditForm(r)
         {
            options = {buttons:{Close:function(){$dialog.dialog("destroy");$('#langVar').remove();}}};
            $('#langVar form').html((r ? "{%$TR->make->saved|escape:'javascript'%}" : "{%$TR->error->unknown|escape:'javascript'%}"));
            $dialog.dialog("option", options);
            if(r) $("#grid").trigger("reloadGrid");
         }
      </script>
      <script id="tmplForm" type="text/x-jquery-tmpl">
            <form>
            <input type="hidden" name="id" value="${id}" />
            <table width="100%" cellpadding="0" cellspacing="0">
            {%if $authorizedUser->id == 1%}
            <tr>
            <td class="rt"><label for="f_name">{%$TR->meccano->array%}</label></td>
            <td class="lt"><input type="text" id="f_name" name="f[name]" value="${name}" /></td>
            </tr>
            <tr>
            <td class="rt"><label for="f_key">{%$TR->meccano->key%}</label></td>
            <td class="lt"><input type="text" id="f_key" name="f[key]" value="${key}" /></td>
            </tr>
            <tr>
            <td class="rt"><label for="f_system">{%$TR->meccano->systemvar%}</label></td>
            <td class="lt"><input type="checkbox" id="f_system" name="f[system]" value="1"{{if $data.system == 1}} checked="checked"{{/if}} /></td>
            </tr>
            {%else%}
            <tr>
            <td class="rt"><label>{%$TR->meccano->array%}</label></td>
            <td class="lt">${name}</td>
            </tr>
            <tr>
            <td class="rt"><label>{%$TR->meccano->key%}</label></td>
            <td class="lt">${key}</td>
            </tr>
            {%/if%}
         {{each $data.value}}
            <tr>
            <td class="rt"><label for="f_value_${lang_id}">{%$TR->meccano->value%} [${lang_alias}]:</label></td>
            <td class="lt"><textarea id="f_value_${lang_id}" name="f[value][${lang_id}]">${value}</textarea></td>
            </tr>
            {{/each}}
            </table>
            </form>
      </script>
   </body>
</html>
